
<template>
    <view>
        <view class="cultural-detail">
            <view class="title">{{ detail.title }}</view>
            <view class="date text-color-4">
				<view>{{ detail.info }} <text v-if="detail.city">{{ detail.city.name }}</text></view>
				
				<text>{{ detail.created_at }}</text> 
			
			</view>
    
            <view class="content">
                <view class="swiper-wrap" v-if="detail.pic">
                    <swiper class="swiper-box" circular>
                        <swiper-item>
                            <view class="swiper-item">
                                <image class="image" :src="requestUrl + detail.pic" mode="aspectFill" />
                            </view>
                        </swiper-item>
                    </swiper>
                </view>

               <view class="content-item">
                    <mp-html class="zero-view" :tag-style="tagStyle" :markdown="true"
                    :content="detail.content">
                    </mp-html>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import MpHtml from '@/components/MpHtml/mp-html.vue'
	import { requestUrl, appId } from '@/utils/config.js'

    export default {
        components: {
            MpHtml
        },
        data() {
            return {
                detail: {},
                requestUrl: requestUrl,
                current: 0,
                show: true
            }
        },
        onLoad(options){
            this.getDetail(options.id)
        },
        methods: {
            // 文章详情
            async getDetail(id){
				tt.showLoading({title:'加载中'})
                let res = await uni.request({
					url: requestUrl + 'api/article_view',
					method: 'GET',
					header: {
						appid: appId,
					},
					data: {
                        a_id: id
                    }
				})
				tt.hideLoading()
                this.detail = res.data.data
            },

            swiperChange(e){
				this.current = e.detail.current
			},

            // 空格转空格符
            textFormat(text){
                return text.replace(new RegExp(" ", "gm"), "\xa0")
            }
        }
    }
</script>

<style lang="scss" scoped>
    .cultural-detail{
        min-height: 100vh;
        background: #fff;
        
        padding: 0 24rpx;

        .title{
            font-size: 48rpx;
            font-weight: 500;
            line-height: 64rpx;
            padding-top: 8rpx;
        }

        .date{
            font-size: 26rpx;
            line-height: 32rpx;
            padding-top: 10rpx;
			display: flex;
			justify-content: space-between;
        }

        .tag-list{
            padding-top: 10rpx;   

            .tag{
                height: 36rpx;
                line-height: 36rpx;
                border: 2rpx solid #FFD28F;
                background: #FFF6E5;
                border-radius: 8rpx;
                padding: 0 12rpx;
                font-size: 20rpx;
                color: #926E39;
                margin-right: 8rpx;
            }
        }
        
        .info{
            font-size: 32rpx;
            line-height: 1.6;
            white-space:pre-wrap;
        }
        .content{
            padding: 24rpx 0;


            .swiper-wrap {
                position: relative;
                margin-bottom: 36rpx;

                .swiper-box {
                    width: 100%;
                    height: 500rpx;
                    border-radius: 8rpx;
                    overflow: hidden;
                }
            
                .cover {
                    position: absolute;
                    top: 16rpx;
                    right: 18rpx;
                    z-index: 1;
                    height: 50rpx;
                    line-height: 50rpx;
                    border-radius: 28rpx;
                    padding: 0 20rpx;
                    color: #fff;
                    font-size: 24rpx;
                    background: rgba(0,0,0,0.4);
                }
            
                .swiper-item {
                    /* #ifndef APP-NVUE */
                    display: flex;
                    /* #endif */
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background-color: #f5f7fb;
                    color: #fff;
                    height: 500rpx;
                }
            
                .image {
                    width: 100vw;
                    height: 500rpx;
                    border-radius: 8rpx;
                    overflow: hidden;
                }
            }

            .content-title{
                margin: 36rpx 24rpx;
                height: 88rpx;
                border: 2rpx solid rgba(130,96,51,0.8);
                border-radius: 46rpx;
                position: relative;

                view{
                    width: 100%;
                    background: #fff;
                    line-height: 42rpx;
                    border: 2rpx solid rgba(130,96,51,0.8);
                    border-radius: 46rpx;
                    color: #826033;
                    font-size: 32rpx;
                    text-align: center;
                    padding: 23rpx 0;
                    position: absolute;
                    top: 12rpx;
                    left: 24rpx;
                }
            }

            .text{
                font-size: 32rpx;
                font-weight: 400;
                color: rgba(0,0,0,0.7);
                letter-spacing: 1px;
                line-height: 42rpx;
                white-space:pre-wrap;
            }

            .image image{
                width: 100%;
                margin-top: 24rpx;
            }
        }

        .footer{
            height: 64rpx;
            padding-bottom: 24rpx;

            .footer-wrap{
                background: #fff;
            }
            
            .distance{
                padding: 0 16rpx;
                height: 64rpx;
                border-radius: 8rpx;
                background: #F4F4F4;
                align-items: center;
            }

            .left::before{
                content: '';
                display: inline-block;
                width: 30rpx;
                height: 30rpx;
                background: url('../../static/poistion-blue.png') center no-repeat;
                background-size: 30rpx 30rpx;
                vertical-align: middle;
                margin-right: 12rpx;
                margin-top: -4rpx;
            }

            .right{
                color: #077C89;
                font-size: 24rpx;
                .icon{
                    vertical-align: middle;
                    margin-top: 2rpx;
                }
            }
        }
    }

    .empty{
        color: #fff;
    }
</style>